<template>
  <div>
    <!-- <pre>{{data}}</pre> -->
    <!-- <pre>{{list}}</pre> -->
    <!-- <pre>{{item}}</pre> -->
    <van-index-bar :index-list="item" class="Bar">
      <div v-for="(v,i) in list" :key="i">
       
        <van-index-anchor :index=v.index>{{v.index}}</van-index-anchor>
        <dl v-for="(item,index) in v.children" :key="index" @click="showprop(item.children)">
          <dt>
            <img :src=item.img alt="">
          </dt>
          <dd>
            <p>{{item.title}}</p>
          </dd>
        </dl>
      </div>
    </van-index-bar>
      <van-popup v-model="show" position="right" :style="{width:'80%', height:'100%' }">
      <div v-for="(v,i) in data" :key="i">
          <div style="width:100%;line-height:30px;background:#ccc;"><b style="margin:0 10px">{{v.title}}</b></div>
          <dl style="background:#fff">
            <dt>
              <img :src=v.img alt="">
            </dt>
            <dd>
              <p><b>{{v.title}}</b></p>
              <p style="font-size:12px;"><b style="color:red">{{v.num.toFixed(2)}}-{{v.num1.toFixed(2)}}万</b></p>
            </dd>
          </dl>
      </div>
      </van-popup>
  </div>
</template>

<script>
// import <组件名称> from '<组件路径>'
import {mapState,mapActions,} from 'vuex'
  export default {
    name: 'App',
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
          show: false,
      }
    },
    //监听属性 类似于data概念
    computed: {
     ...mapState(['list','item','data'])
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      ...mapActions(['SET_LIST']),
      showprop(id){
        this.show=true,
        // console.log(id)
        this.$store.commit('SET_ID',id)
        
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.SET_LIST()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
  *{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
  }
 
  dl{
    width: 100%;
    height: 100px;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: #f5f5f5;
    dt{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 10px;
      img{
        width: 100%;
        height: 100%;
         border-radius: 50%;
      }
      dd{
        width: 200px;
        height: 100px;
        display: flex;
       
        p{
          width: 100%;
          height: 20px;
          margin: 15px 0;
        }
      }
    }
  }
</style>
